import { View, Text } from '@tarojs/components';
import { Icon } from '@antmjs/vantui';
import React, { ReactNode } from 'react';
import './text-icon.less';

export interface TextIconProps {
  /**
   * Icon name from Vant UI icon list
   * If customIcon is provided, this will be ignored
   */
  iconName?: string;

  /**
   * Custom icon component
   * Will override iconName if provided
   */
  customIcon?: ReactNode;

  /**
   * Text content
   */
  text: string;

  /**
   * Icon position relative to text: 'top' | 'right' | 'bottom' | 'left'
   * @default 'left'
   */
  iconPosition?: 'top' | 'right' | 'bottom' | 'left';

  /**
   * Icon size (only applies to Vant UI icons, not custom components)
   * @default '14PX'
   */
  iconSize?: string | number;

  /**
   * Icon color (only applies to Vant UI icons, not custom components)
   * @default '#323233'
   */
  iconColor?: string;

  /**
   * Text color
   * @default '#323233'
   */
  textColor?: string;

  /**
   * Text size
   * @default '14PX'
   */
  textSize?: string | number;

  /**
   * Space between icon and text
   * @default '4PX'
   */
  space?: string | number;

  /**
   * Custom className
   */
  className?: string;

  /**
   * Custom style for the container
   */
  style?: React.CSSProperties;

  /**
   * Click event handler
   */
  onClick?: (event) => void;
}

const TextIcon: React.FC<TextIconProps> = ({
                                             iconName,
                                             customIcon,
                                             text,
                                             iconPosition = 'left',
                                             iconSize = '14PX',
                                             textSize = '14PX',
                                             iconColor = '#323233',
                                             textColor = '#323233',
                                             space = '4PX',
                                             className = '',
                                             style = {},
                                             onClick,
                                           }) => {
  const containerClass = `text-icon text-icon--${iconPosition} ${className}`;

  const containerStyle = {
    '--icon-space': space,
    ...style
  } as React.CSSProperties;

  const textStyle = {
    color: textColor,
    fontSize: textSize,
  };

  // Determine which icon to render (custom or Vant UI icon)
  const renderIcon = () => {
    if (customIcon) {
      return customIcon;
    } else if (iconName) {
      return <Icon name={iconName} size={iconSize} color={iconColor} />;
    }
    return null;
  };

  return (
    <View className={containerClass} style={containerStyle} onClick={onClick}>
      {(iconPosition === 'left' || iconPosition === 'top') && renderIcon()}
      <Text className='text-icon__text' style={textStyle}>{text}</Text>
      {(iconPosition === 'right' || iconPosition === 'bottom') && renderIcon()}
    </View>
  );
};

export default TextIcon;
